<template>
	<div class="goodsinfobox">
		<div class="swiper">
			<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				circular="true" :duration="duration">
				<swiper-item v-for="(item,index) in swiperbox" :key="index">
					<image :src="item" mode=""></image>
				</swiper-item>
			</swiper>
		</div>
		<div class="goodsishow">
			<p class="price">￥{{goodsinfo.price}}</p>
			<p class="name">{{goodsinfo.name}}</p>
			<p class="msg">{{goodsinfo.msg}}</p>
			<p class="paynum">{{goodsinfo.paynum}}人已购买</p>
		</div>
		<div class="freight">
			<div>
				<p>品牌</p>
				<p>喜茶</p>
			</div>
			<div>
				<p>运费</p>
				<p>具体运费将以结算为准</p>
			</div>
		</div>
		<div class="buttonlist">
			<div>
				<image src="../../static/shopping-bag.png" mode=""></image>
				<p>百货</p>
			</div>
			<div>
				<image src="../../static/message2.png" mode=""></image>
				<p>客服</p>
			</div>
			<span @click="toggle()">加入购物袋</span>
			<span>立即购买</span>
		</div>
		<uni-popup ref="popup" type="message">
			<div class="goodssel">
				<div class="title">
					<div>
						<image :src="swiperbox[0]" mode=""></image>
					</div>
					<div>
						<p class="name" >{{goodsinfo.name}}</p>
						<p class="msg" >{{goodsinfo.msg}}</p>
						<p class="price" >￥{{goodsinfo.price}}</p>
					</div>
				</div>
				<div class="sellist">
					<div class="seltype">
						<p style="color:#999" >商品</p>
						
					</div>
					<div class="selnum">
						<p style="color:#999">购买数量</p>
						<div>
							<span class="prev" @click="changepay(prev)">-</span>
							<span class="paynum">{{paynum}}</span>
							<span class="add" @click="changepay(add)">+</span>
						</div>
					</div>
				</div>
				<div class="close" @click="closealert" >×</div>
				<button class="button" @click="closealert" >确定</button>
			</div>
		</uni-popup>
	</div>
</template>

<script>
	import request from "../../utils/request.js"
	export default {
		data() {
			return {
				indicatorDots: true,
				autoplay: true,
				interval: 3000,
				duration: 500,
				goodsinfo: {},
				swiperbox: [],
				goodstype:[],
				spprice:0,
				paynum:0
			}
		},
		methods: {
			toggle() {
				this.$refs.popup.open('center')
			},
			closealert(){
				this.$refs.popup.close()
			},
			changepay(type){
				if(type==="prev"){
					if(this.paynum===0){
						this.paynum=0
					}else{
						this.paynum=this.paynum-1
					}
				}else if(type==="add"){
					this.paynum=this.paynum+1
				}
			}
		},
		async onLoad(option) {
			let ginfo = await request("/getinfo", {
				num: option.id
			}, "GET");
			this.goodsinfo = ginfo
			this.swiperbox = JSON.parse(ginfo.swiper)
			this.goodstype=JSON.parse(ginfo.type)
			if(this.goodstype.length>1){
				this.spprice=this.goodstype[0].price
			}else{
				this.spprice=ginfo.price
			}
		}
	}
</script>

<style scoped>
	.goodsinfobox {
		background-color: #F6F6F6;
	}

	.swiper {
		width: 100vw;
		height: 100vw;
	}

	.swiper image {
		width: 100%;
		height: 100%;
	}

	.goodsishow {
		position: relative;
		padding: 30rpx;
		background-color: white;
	}

	.goodsishow>.price {
		color: #D7A871;
		font-size: 50rpx;
		margin-bottom: 30rpx;
	}

	.goodsishow>.name {
		font-size: 38rpx;
	}

	.goodsishow>.msg {
		margin-top: 5rpx;
		font-size: 28rpx;
		color: #999;
	}

	.goodsishow>.paynum {
		position: absolute;
		right: 40rpx;
		top: 44rpx;
		font-size: 24rpx;
		color: #999;
	}

	.buttonlist {
		position: fixed;
		bottom: 0;
		width: 100%;
		padding: 20rpx 0;
		display: flex;
		justify-content: space-around;
		background-color: white;
	}

	.buttonlist>div {
		font-size: 13px;
		line-height: 14px;
		text-align: center;
	}

	.buttonlist image {
		width: 50rpx;
		height: 50rpx;
	}

	.buttonlist>span {
		padding: 0 45rpx;
		line-height: 80rpx;
		font-size: 900;
	}

	.buttonlist>span:nth-child(odd) {
		background-color: #424141;
		color: white;
	}

	.buttonlist>span:nth-child(even) {
		background-color: #D7A871;
		color: white;
	}

	.freight {
		margin-top: 35rpx;
		margin-bottom: 145rpx;
		background-color: white;
	}

	.freight>div {
		display: flex;
		align-items: center;
	}

	.freight>div>p:nth-child(odd) {
		padding: 20rpx 60rpx;
		color: #999;
	}

	.goodssel {
		width: 90vw;
		height: 70vh;
		box-sizing: border-box;
		background-color: white;
		border-radius: 40rpx;
		padding: 50rpx;
		position: relative;
	}
	.goodssel image{
		width: 160rpx;
		height: 160rpx;
		margin-right: 40rpx;
	}
	.goodssel>.title{
		display: flex;
		padding-right: 50rpx;
	}
	.goodssel>.title .name{
		font-size: 30rpx;
		font-weight: 900;
	}
	.goodssel>.title .msg{
		font-size: 26rpx;
		color: #999;
		margin-top: 5rpx;
	}
	.goodssel>.title .price{
		font-size: 36rpx;
		color: #D7A871;
		margin-top: 15rpx;
	}
	
	.goodssel>.sellist{
		width: 100%;
		height: 380rpx;
		position: relative;
	}
	.goodssel>.sellist>.selnum{
		width: 100%;
		position: absolute;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.goodssel>.sellist>.selnum .prev,.goodssel>.sellist>.selnum .add{
		display: inline-block;
		width: 55rpx;
		height: 55rpx;
		font-size: 60rpx;
		text-align: center;
		border-radius: 50%;
		line-height: 55rpx;
	}
	.goodssel>.sellist>.selnum .prev{
		border: 1px solid #ccc;
		color: #ccc;
		margin-right: 20rpx;
	}
	.goodssel>.sellist>.selnum .add{
		background-color: #D7A871;
		color: white;
		margin-left: 20rpx;
	}
	.goodssel>.sellist>.seltype>div{
		width: 100%;
		height: 260rpx;
	}
	.goodssel>.sellist>.seltype span{
		padding: 10rpx 40rpx;
		background-color: #F5F5F7;
		font-size: 28rpx;
		margin: 20rpx;
		
	}
	.goodssel .button{
		position: absolute;
		bottom: 40rpx;
		background-color:#D7A871 ;
		color: white;
		border: none;
		width: 574rpx;
	}
	.goodssel .close{
		width: 60rpx;
		height: 60rpx;
		text-align: center;
		line-height: 60rpx;
		font-size: 50rpx;
		position: absolute;
		right: 40rpx;
		top: 40rpx;
		border-radius: 50%;
		background-color: rgba(0,0,0,.3);
		color: white;
	}
</style>
